.hv-dashboard-designer {
  width: 100vw;
  height: 100vh;
  display: flex;


  .hv-designer-component-panel {
    width: var(--hv-dash-des-comp-panel-width);
    height: 100%;
    background: var(--hv-dash-des-comp-panel-bg);
  }

  .hv-dashboard-designer-main {
    width: calc(100% - var(--hv-dash-des-comp-panel-width) - var(--hv-dash-des-config-panel-width));
    height: 100%;
    //border-left: var(--hv-border-width-base) var(--hv-border-style-base)
    //var(--hv-dark-bor-color);
    //border-right: var(--hv-border-width-base) var(--hv-border-style-base)
    // var(--hv-dark-bor-color);

    .hv-dashboard-designer-header {
      height: var(--hv-dash-des-header-height);
      background: var(--hv-dash-des-header-bg);
      border-bottom: var(--hv-border-width-base) var(--hv-border-style-base) var(--hv-dark-bor-color);
    }

    .hv-designer-canvas-panel {
      width: 100%;
      height: calc(100vh - var(--hv-dash-des-header-height));
      background: var(--hv-dash-des-canvas-panel-bg);
    }
  }

  .hv-designer-config-panel {
    width: var(--hv-dash-des-config-panel-width);
    height: 100%;
    background: var(--hv-dash-des-config-panel-width-bg);
    border-left: var(--hv-border-width-base) var(--hv-border-style-base) var(--hv-dark-bor-color);

    :deep(.ant-tabs-bar) {
      margin: 0;
      height: var(--hv-dash-des-header-height);
    }

    :deep(.ant-tabs-tab) {
      padding-left: 8px;
      padding-bottom: 8px;
      padding-top: 8px;
      padding-right: 8px;
    }
    :deep(.ant-tabs-nav){
      margin: 0;
    }

    :deep(.ant-tabs-nav .ant-tabs-tab .anticon) {
      margin-right: 2px;
    }

    :deep(.ant-tabs-nav-wrap) {
      height: var(--hv-dash-des-header-height);
    }

    :deep(.ant-tabs-tabpane) {
      height: calc(100vh - var(--hv-dash-des-header-height));
    }

    :deep(.hv-svg-icon){
      padding-top: 1px;
    }
  }
}